<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            /* 不可调整大小 */
            resize: none;
        }
    </style>
</head>

<body>
    <form action="" onsubmit="alert('不凡学院')" onreset="sum('hello','js')">
        <!-- maxlength   允许输入框输入的最大字符数 -->
        <textarea cols="30" rows="10" maxlength="20" id="txt"></textarea>
        <p>还可以输入<span>20</span>个字</p>
        <p>
            <input type="submit">
            <input type="reset">
        </p>
    </form>
    <script>
        var text = document.querySelector("textarea");
        var span = document.querySelector("span");
        var input = document.querySelectorAll("input");
    
        // 表单事件
        // onchange           输入框的内容改变时触发(光标离开时触发)
        // oninput            输入框的内容改变时触发(内容一改变就触发)
        text.onchange = function () {
            console.log("onchange");
        }
        // 可以实时监听输入的个数
        text.oninput = function () {
            // console.log("oninput");
            // 获取输入的内容
            console.log(text.value);
            // 获取允许输入的最大字符数
            console.log(text.maxLength);        //20
            // 获取输入内容的长度  
            console.log(text.value.length);

            // 还能输入多少
            // 最大字符数 - 内容的长度
            var num = text.maxLength - text.value.length;
            console.log(num);
            span.innerHTML = num;
        }

        // onfocus       输入框获取光标时触发
        // onblur        输入框失去焦点时触发
        text.onfocus = function () {
            // 边框颜色改变为红色
            text.style.border = "5px solid pink";
            // 去掉轮廓线
            text.style.outline = "none";
            // 把提交按钮的背景颜色改变为蓝色
            input[0].style.background = "blue";
        }

        text.onblur = function () {
            // 边框颜色改变为绿色
            text.style.borderColor = "green";
        }

        // onsubmit      表单提交时触发
        // onreset       表单重置时触发
        // 作为表单的属性写在行内
        function sum(a, b) {
            alert(a + b);
        }

        // document事件
        // onload        页面加载完成时触发
        window.onload = function(){
            text.value = "不凡学院";
            input[1].style.width = "100px";
        }
    </script>
</body>

</html>